<template>
  <el-container>
    <el-header>
      <!-- {{ $store.state.userInfo.uname }} -->
      <page-header></page-header>
    </el-header>
    <el-container>
      <el-aside></el-aside>
      <el-main>
        <h1>HOME VIEWS</h1>
        <hr />
        <el-button @click="$store.dispatch('countAc', { number: 10 })">{{
          $store.state.count
        }}</el-button>
        <el-button @click="$store.state.count += 100">{{
          $store.state.count
        }}</el-button>
        <el-button @click="$store.dispatch({ type: 'countAc', number: 10 })">{{
          $store.state.count
        }}</el-button>
        <div>
          <h3>计算属性的map:count: {{ getStateCount }}</h3>
          <h3>token: {{ getToken }}</h3>
          <h3>count: {{ myCount }}</h3>
        </div>
        <div>
          <h3>mapState's count: {{ count }}</h3>
          <h3>mapState’s userInfo: {{ userInfo.uname }}</h3>
          <h2>自己的computed: {{ myGetCount }}</h2>
        </div>
        <div>
          <el-button @click="countAc({ number: 5 })"
            >mapActions's countAc</el-button
          >
          <el-button @click="countMt(50)">mapMutations's countMt: </el-button>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template> 

<script>
import { mapGetters, mapState, mapMutations, mapActions } from "vuex";
import PageHeader from "../components/PageHeader.vue";
export default {
  components: { PageHeader },
  computed: {
    //  mapGetters(),返回一个对象。对象中就包括 getters中的函数
    // 使用对象展开运算符将 getter 混入 computed 对象中
    // ... {getStateCount, getToken},
    ...mapGetters(["getStateCount", "getToken"]),
    ...mapGetters({
      myCount: "getStateCount", // 把getters里面的函数名，赋值给另外的函数。
    }),

    //直接把状态映射成一个计算属性。
    ...mapState(["count", "userInfo"]), // 映射state
    myGetCount() {
      return this.$store.state.count;
    },
  },
  methods: {
    // 注意： 映射的方法，不要做文本插值，这样会导致渲染的无限循环。
    // 应该通过事件来调用或者在别的方法种调用。
    ...mapActions(["countAc"]), // countAc({,nubmer:5}), 就相当于执行this.$store.dispatch({type:'countAc',nubmer:5})
    ...mapMutations(["countMt"]), // countMt(50), 映射成 this.$store.commit( 'countMt', 50)
  },
};
</script>

<style>
</style>